<template>


  <v-row justify="center">

    <v-dialog v-model="isShowDateRangePicker" persistent>


      <v-card>
        <v-card-title>
          <span class="headline">请选择要查看的时间段</span>
        </v-card-title>

        <v-card-text class="custom-bg">
          <ul class="dsp-flex">
            <li :class="isActive==0?'actived-tab':''" @click="activedHandler(0)">今日</li>
            <li :class="isActive==1?'actived-tab':''" @click="activedHandler(1)">一周</li>
            <li :class="isActive==2?'actived-tab':''" @click="activedHandler(2)">本月</li>
          </ul>
        </v-card-text>

        <v-card-text>区域时间选择确定</v-card-text>

        <v-card-text>
          <v-container>
            <v-row>

              <v-col cols="5" class="pd-clear">
                <v-subheader>起始时间</v-subheader>
              </v-col>

              <v-col cols="7" class="pd-clear">
                <v-text-field v-model="beginDate" append-icon="iconfont-icon iconrili" readonly
                  @click="pickDateHandler('beginDate')"></v-text-field>
              </v-col>


            </v-row>


            <v-row>

              <v-col cols="5" class="pd-clear">
                <v-subheader>结束时间</v-subheader>
              </v-col>
              <v-col cols="7" class="pd-clear">
                <v-text-field v-model="endDate" append-icon="iconfont-icon iconrili" readonly
                  @click="pickDateHandler('endDate')"></v-text-field>
              </v-col>

            </v-row>


          </v-container>

        </v-card-text>


        <v-card-actions>
          <div class="flex-grow-1"></div>
          <v-btn color="blue darken-1" text @click="emitHandler(0)">取消</v-btn>
          <v-btn color="blue darken-1" text @click="emitHandler(1)">确定</v-btn>
        </v-card-actions>


      </v-card>






      <v-dialog v-model="dialogStatus" persistent full-width width="290px">
        <v-date-picker @change="dateChangeHandle" v-model="dateText" :show-current="true">
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="dialogStatus = false">完成</v-btn>
          <!-- <v-btn text color="primary">确定</v-btn> -->
        </v-date-picker>
      </v-dialog>




    </v-dialog>

    <!-- <xy-date-picker v-model="form.productionTime" label="起始时间" :rules="rules.productionTime"></xy-date-picker> -->
    <!-- <xy-date-picker v-model="form.productionTime" label="结束时间" :rules="rules.productionTime"></xy-date-picker> -->

  </v-row>
</template>

<script>
  import moment from "moment";
  import xyDatePicker from "../../views/picker/DatePicker";
  export default {
    data: () => ({

      type: "",

      dateText: "",

      dialogStatus: false,

      form: {
        productionTime: null
      },
      rules: {
        productionTime: [
          value => {
            if (!value) {
              return true;
            }
            return moment(value).valueOf() < moment().valueOf() || "时间无效";
          }
        ],
      },


      isActive: 0,
      beginDate: moment().format('YYYY-MM-DD'),
      endDate: moment().format('YYYY-MM-DD')

    }),

    components: {
      xyDatePicker
    },
    props: {
      isShowDateRangePicker: {
        default: false,
        type: Boolean
      },



    },
    methods: {

      //将yyyy-mm-dd格式时间转为时间戳
      get_unix_time(dateStr) {
        var newstr = dateStr.replace(/-/g, '/');
        var date = new Date(newstr);
        var time_str = date.getTime().toString();

        return Number(time_str.substr(0, 10));
      },

      //选择input框触发
      pickDateHandler(dateType) {
        this.dialogStatus = true;
        //将点击的是哪个input保存
        this.type = dateType;
      },

      //点击控件选择日期触发
      dateChangeHandle(val) {

        if (this.type == "beginDate") {
          this.beginDate = val;
        } else {
          this.endDate = val;
        }


      },


      emitHandler(index) {


        if (index == 0) {
          this.$emit("fromChildTurnDialogOff", {
            isShowDateRangePicker: false,
          });
        } else {

          //比较时间前后大小
          if(this.get_unix_time(this.beginDate)>this.get_unix_time(this.endDate)){
            this.$message.error("开始时间不能大于结束时间");
            return
          }

          this.$emit("fromChildTurnDialogOff", {
            isShowDateRangePicker: false,
            beginDate: this.beginDate,
            endDate: this.endDate
          });
        }

        //激活重置为第一个
        this.isActive = 0;
        //重置为当天
        this.beginDate = moment().format('YYYY-MM-DD');
        this.endDate = moment().format('YYYY-MM-DD');
      },

      activedHandler(index) {
        this.isActive = index;

        switch (index) {
          case 0:
            this.beginDate = moment().format('YYYY-MM-DD');
            this.endDate = moment().format('YYYY-MM-DD');
            break
          case 1:

            this.beginDate = moment().subtract(6, 'days').format('YYYY-MM-DD');
            this.endDate = moment().format('YYYY-MM-DD');

            break
          case 2:
            let start = moment().add(0, 'month').format('YYYY-MM') + '-01'
            let end = moment(start).add(1, 'month').add(-1, 'days').format('YYYY-MM-DD')

            this.beginDate = start;
            this.endDate = end;
            break
        }


      },



    }
  }

</script>

<style scoped>
  .text-center {
    text-align: center !important;
  }

  ul,
  li {
    margin: 0;
    padding: 0 !important;

    list-style-type: none;
  }

  .dsp-flex {
    display: flex;
    justify-content: space-around;
    align-content: center;
  }

  .v-card__title+.v-card__text {
    padding-top: 16px;
  }

  .dsp-flex li {
    border: 1px solid #97abee;
    color: #000;
    text-align: center;
    padding: 4px 14px !important;
    width: 28%;
    border-radius: 3px;

  }

  .v-card__text {
    text-align: center;
  }

  .custom-bg {
    background: #f3f7fd;

  }

  .v-text-field {
    padding-top: 0px;
    margin-top: 0px;
  }

  .pd-clear {
    padding: 0 !important;
  }

  .actived-tab {
    background-color: #7799ee;
    color: #fff !important;
  }

</style>
